<template>
  <div class="w-[100vw] h-[100vh] flex flex-row bg-theme">
    <div class="flex flex-col justify-center items-center m-auto">
      <div class="mt-[32px] flex flex-row justify-center items-center s4k:mt-[64px] s2k:mt-[42.6px]">
        <!-- <svg-icon name="logo" width="29.62px" height="24px" class="svgLogo"></svg-icon>
        <svg-icon name="logo2" width="130.33px" height="15.95px" class="svgLogo ml-[3px] s4k:ml-[90px]"></svg-icon> -->
        <svg-icon name="longLogo" width="171px" height="24px" class="svgLogo s4ksvg s2ksvg"></svg-icon>
      </div>
      <div class="w-[23.3vw] h-auto bg-[#1F2A37] mt-[32px] rounded-md shadowLogo s4k:mt-[64px] s2k:mt-[42.6px]">
        <div class="text-[2rem] text-white w-[20vw] ml-[32px] mt-[32px] font-bold s4k:mt-[64px] s4k:ml-[64px] s2k:mt-[42.6px] s2k:ml-[42.6px]">Log in</div>
        <div class="text-[1.13rem] text-white w-[20vw] ml-[32px] mt-[20px] s4k:ml-[64px] s4k:mt-[40px] s2k:ml-[42.6px] s2k:mt-[26.6px]">Email</div>
        <fwb-input id="input" v-model="form.email" placeholder="" />
        <div class="text-[1.13rem] text-white w-[20vw] ml-[32px] mt-[20px] s4k:ml-[64px] s4k:mt-[40px] s2k:ml-[42.6px] s2k:mt-[26.6px]">Passowrd</div>
        <fwb-input id="input" v-model="form.password" placeholder=""  type="password" />
        <div class="flex flex-row justify-between items-center w-[20vw] my-[20px] ml-[32px] s4k:my-[40px] s4k:ml-[64px] s2k:ml-[42.6px] s2k:my-[26.6px]">
          <fwb-checkbox id="check" v-model="form.check" label="Remember me" />
          <span class="text-[1rem] text-[#3F83F8] cursor-pointer">Forgot password?</span>
        </div>
        <div class="w-[20vw] h-[41px] flex bg-[#1C64F2] text-white ml-[32px] rounded-md cursor-pointer s4k:h-[82px] s4k:ml-[64px] s2k:h-[54.6px] s2k:ml-[42.6px] s2k:rounded-[8px]" @click="login">
          <span class="m-auto text-[1.13rem]">Login</span>
        </div>
        <div class="w-[20vw] ml-[32px] text-[1.13rem] text-white mt-[16px] mb-[32px] s4k:ml-[64px] s4k:mt-[32px] s4k:mb-[64px]  s2k:ml-[42.6px] s2k:mt-[21.3px] s2k:mb-[42.6px]">
          Already have an account? <span class="text-[#3F83F8]">Login here</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Login">
import { onMounted, reactive, ref } from "vue";
import { FwbInput,FwbCheckbox  } from 'flowbite-vue'
import { useRouter } from "vue-router";
const router = useRouter()
const form = reactive({
  email: "name@example.com",
  password: "xxxxxxxxxxxx",
  check: false
})
const login = () => {
  router.push("/")
}
</script>

<style scoped lang="scss">
.shadowLogo{
  box-shadow: 0px 1px 2px -1px #0000001A;
}
#input {
  width: 20vw;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 32px;
  margin-top: 8px;
  :deep(input){
    font-size: 1.13rem;
    color: #9CA3AF;
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    background-color: #374151;
    border: solid 1px #4B5563;
    &:focus {
      outline: none;
      box-shadow: inset 0 0;
    }
  }
  // border: solid 1px #4B5563;

}
#check {
  width: 50%;
  position: relative;
  :deep(input) {
    width: 16px;
    height: 16px;
    margin: 0;
    border: solid var(--grid) 1px;
    background-color: var(--layout-nav-bg);
    font-size: 1.25rem;
    cursor: pointer;

    &:checked {
      background-color: #1a56db;
      border-color: #1a56db;
    }
  }
  :deep(span) {
    font-size: 1.13rem;
    color: #ffffff;
    position: absolute;
    left: 24px;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1.5) !important;
  }
  #input {
    height: 56px;
    margin-left: 42.6px;
    margin-top: 10.6px;
  }
  #check {
    :deep(input) {
      width: 21.3px;
      height: 21.3px;
    }
    :deep(span) {
      left: 32px;
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(2) !important;
  }
  #input {
    height: 84px;
    margin-left: 64px;
    margin-top: 16px;
  }
  #check {
    :deep(input) {
      width: 32px;
      height: 32px;
    }
    :deep(span) {
      left: 48px;
    }
  }
}
</style>